<template>
	<view class="time-wrap">
		<navBar color="#fff" background="#f3e6d2" :title="$t('Eliminate.odor.and.bacteria')"></navBar>
		<view class="time-box">
			<view class="circle flex_col_center color_theme">
				<view>
					<view><text class="font_size_117">{{time}}</text><text
							class="font_size_32">{{$t('home.minute')}}</text></view>
					<view class="b-btn flex_1">
						<!-- <picker mode="multiSelector" :range="multiRange" @change="onChange">
							<view class="picker">
								{{$t('home.Adjust-duration')}}
							</view>
						</picker> -->
						<view class="picker" @click="goAdjustDuration">
							{{$t('home.Adjust-duration')}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn w_90 yx" @click="openUsernotice">{{$t('home.run')}}</view>
		<view class="reserve" @click="openTimePicker">{{$t('home.reservation')}}</view>
		<!-- 调节时长 -->
		<CustomPickerTime :status="2" @confirm="goCustomPickerTime" ref="CustomPickerTime"></CustomPickerTime>
		<!-- 打开时间选择器 -->
		<CustomPicker ref="customTimePicker" @confirm="hanleConfirm"></CustomPicker>

		<!-- 协议弹窗 -->
		<PopupUsernotice ref="usernotice" @confirm="handleUsernotice"></PopupUsernotice>

		<!-- 加载中弹窗 -->
		<uni-popup ref="popup" :mask-click="false"></uni-popup>

	</view>
</template>

<script>
	import PopupUsernotice from '@/componets/PopupUsernotice.vue';
	import CustomPicker from '@/componets/CustomPicker.vue';
	import CustomPickerTime from '@/componets/CustomPickerTime.vue';
	import {
		setDeviceWorkMode,
		createDeviceScheduleTask
	} from '@/api/home.js'
	import {
		pushTemplate
	} from "@/utils/util.js"
	export default {
		components: {
			CustomPicker,
			PopupUsernotice,
			CustomPickerTime
		},

		onLoad(options) {
			this.sn = options.sn;
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#f3e7d3'
			})
		},
		data() {
			return {
				// minutes: [...Array(90 - 30 + 1).keys()].map(n => n + 30),
				// multiRange: [   //用于展示在时间弹窗数据
				// 	[...Array(90 - 30 + 1).keys()].map(n => n + 30),
				// 	['分钟']
				// ],
				multiRange: [
					[45, 90],
					['分钟']
				],
				multiIndex: [0, 0], // 默认选中第一列的第一个和第二列的第一个
				time: 45,
				mode: 15, //默认60分钟按接口参数传10
			}
		},
		onShow() {
			this.EnglistData();
		},
		methods: {
			// 确认时长
			goCustomPickerTime(e) {
				console.log(e, 'e')
				this.time = e
				switch (this.time) {
					case 45:
						this.mode = 15;
						break;
					case 90:
						this.mode = 16;
						break;
				}
			},
			// 调节时长
			goAdjustDuration() {
				this.$refs.CustomPickerTime.open();
			},
			EnglistData() {
				this.multiRange = [
					[45, 90],
					[this.$t('home.minute'), ]
				]
			},
			openTimePicker() {
				this.$refs.customTimePicker.open();
			},
			hanleConfirm(time) {
				let yyTimer = this.config.formatTimeWithDate(time);
				createDeviceScheduleTask({
					sn: this.sn,
					mode: this.mode,
					executeTime: yyTimer
				}).then((r) => {
					console.log(r, 'rrrrrr')
					if (r.code === 0) {
						this.config.Toast(this.$t('Appointment.successful'));
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/device/device'
							})
						}, 1500)
					} else {
						this.config.Toast(r.message);
					}
				}).catch(err => {
					console.log('err==', err.code)
				})
			},
			// 预约分钟
			onChange(e) {
				let multiIndex = e.detail.value[0];
				let currentMultiRange = this.multiRange[0];

				this.time = currentMultiRange[multiIndex]
				// this.openUsernotice();
				switch (this.time) {
					case 45:
						this.mode = 15;
						break;
					case 90:
						this.mode = 16;
						break;
				}
				console.log('multiIndex==', this.time)
			},
			// 打开同意协议弹窗
			openUsernotice() {
				this.$refs.usernotice.open();
			},
			handleUsernotice() {
				// this.$refs.popup.open();
				uni.showLoading({
					title: this.$t('loading')
				});
				pushTemplate().then(() => {
					setDeviceWorkMode({
						sn: this.sn,
						mode: this.mode
					}).then((r) => {
						// this.config.Toast('修改成功');
						console.log('运行', r)
						if (r.code === 0) {
							// 隐藏加载提示
							uni.hideLoading();
							// this.$refs.popup.close();
							// this.config.path('/pagesA/home/quickCare/careing?sn=' + this.sn); 
							uni.setStorageSync('careSn', this.sn);
							uni.switchTab({
								url: '/pages/home/home'
							});
						} else {
							uni.hideLoading();
						}
					}).catch(err => {
						this.config.Toast(err.message);
						// uni.hideLoading();
						this.$refs.popup.close()
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.font_size_60 {
		font-size: 60rpx;
		font-weight: bold;
	}

	.picker {
		text-align: center;
		font-size: 25rpx;
	}

	.time-wrap {
		.time-box {
			height: 660rpx;
			background-image: linear-gradient(to bottom, #F3E6D1, rgba(232, 224, 205, 0.1));
			padding-top: 260rpx;
			box-sizing: border-box;

			.circle {
				width: 397rpx;
				height: 397rpx;
				margin: auto;
				background-repeat: no-repeat;
				background-image: url('https://be.coucoq.cn/jueli/static/2025/01/07/f0ae13e0-e801-4b67-bb28-c088ead11289.png');
				background-size: 100% 100%;

				.b-btn {
					width: 190rpx;
					height: 58rpx;
					background: #AF9453;
					box-shadow: 0rpx 9rpx 9rpx 0rpx rgba(175, 148, 83, 0.54);
					border-radius: 29rpx;
					color: #fff;
					font-size: 30rpx;
					margin: auto;
				}
			}
		}
	}
</style>